<template>
	<view class="tab-block">
		<ul v-if="tabListNum==1"
			class='tab-list flex flex-center '
			:class="showMiddleButton === true?'tab-list-middle':'tab-list-default'"
		>
			<li
				v-for="(item, index) in tabList"
				:class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@click="handlePush(item, index)"
				:key="index"
			>
				<view class="item-img-box">
					<image
						class="item-img"
						:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
					/>
				</view>
				<view class="item-text font-20 " :class="[tabIndex == index ? 'color-blue' : 'color-black']">
					{{item.text}}
				</view>
			</li>
			
		</ul>
		<ul v-if="tabListNum==2"
			class='tab-list flex flex-center'
			:class="showMiddleButton === true?'tab-list-middle':'tab-list-default'"
		>
			<li
				v-for="(item, index) in tabListTwo"
				:class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@click="handlePush(item, index)"
				:key="index"
			>
				<view class="item-img-box">
					<image
						class="item-img"
						:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
					/>
				</view>
				<view class="item-text font-20 ":class="[tabIndex == index ? 'color-blackWeight' : 'color-black']">
					{{item.text}}
				</view>
			</li>
			
		</ul>
		<ul v-if="tabListNum==3"
			class='tab-list flex flex-center'
			:class="showMiddleButton === true?'tab-list-middle':'tab-list-default'"
		>
			<li
				v-for="(item, index) in tabListThree"
				:class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@click="handlePush(item, index)"
				:key="index"
			>
				<view class="item-img-box">
					<image
						class="item-img"
						:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
					/>
				</view>
				<view class="item-text font-20 " :class="[tabIndex == index ? 'color-pink' : 'color-black']">
					{{item.text}}
				</view>
			</li>
			
		</ul>
		<ul v-if="tabListNum==4"
			class='tab-list flex flex-center'
			:class="showMiddleButton === true?'tab-list-middle':'tab-list-default'"
		>
			<li
				v-for="(item, index) in tabListFour"
				:class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@click="handlePush(item, index)"
				:key="index"
			>
				<view class="item-img-box">
					<image
						class="item-img"
						:src="tabIndex == index ? item.selectedIconPath : item.iconPath"
					/>
				</view>
				<view class="item-text font-20 " :class="[tabIndex == index ? 'color-green' : 'color-black']">
					{{item.text}}
				</view>
			</li>
			
		</ul>
		<view class="tab-bar" v-show="showTabBar === true"></view>
	</view>
</template>

<script>
	export default {
		props: {
			tabIndex: { //当前选中的tab项
				type: Number,
				default: 0
			},
			// 是否显示中间按钮
			showMiddleButtonBar:{
				type: Boolean,
				default: true
			},
			// 多模版table列表展示
			tabListNum:{
				type:Number,
				default: 1
			}
		},
		data() {
			return {
				/*
				 * iconPath: 默认icon图片路径
				 * selectedIconPath: 选中icon图片路径 
				 * text: tab按钮文字
				 * pagePath:页面路径
				 * middleClass:中间按钮样式类名
				 * tabList最小两项，最多五项
				 * tabList长度为奇数时，中间按钮才会突出显示
				 * 
				 */
				tabList: [{
						iconPath: '../../static/会员卡管理端/组合 541.png',
						selectedIconPath: "../../static/会员卡管理端/组合 304.png",
						text: '首页',
						pagePath: '/pages/index/index',
						middleClass: ''
					},
					{
						iconPath: "../../static/会员卡管理端/组合 542.png",
						selectedIconPath: "../../static/会员卡管理端/组合 303.png",
						text: '数据',
						pagePath: '/pages/dataCenter/dataCenter',
						middleClass: ''
					},
					{
						iconPath: '../../static/会员卡管理端/组合 539.png',
						selectedIconPath: '../../static/会员卡管理端/组合 539.png',
						text: '',
						// pagePath: '/pages/code/code',
						middleClass: ''
					},
					{
						iconPath: "../../static/会员卡管理端/组合 543.png",
						selectedIconPath: "../../static/会员卡管理端/组合 302.png",
						text: '员工',
						pagePath: '/pages/myEmployees/myEmployees'
					},
					{
						iconPath: "../../static/会员卡管理端/微信图片_20240327141300.png",
						selectedIconPath:  "../../static/会员卡管理端/微信图片_20240327141237.png",
						text: '我的',
						pagePath: '/pages/distribution/distribution',
						middleClass: ''
					}
				],
				
				tabListTwo: [{
						iconPath: '../../static/会员卡首页2/组合 336.png',
						selectedIconPath: '../../static/会员卡首页2/组合 334.png',
						text: '首页',
						pagePath: '/pages/index/index2',
						middleClass: ''
					},
					{
						iconPath: '../../static/会员卡首页2/组合 337.png',
						selectedIconPath:'../../static/会员卡首页2/组合 333.png',
						text: '商城',
						pagePath: '/pages/shop/shop',
						middleClass: ''
					},
					{
						iconPath:'../../static/会员卡首页2/组合 307.png',
						selectedIconPath: '../../static/会员卡首页2/组合 307.png',
						text: '会员码',
						pagePath: '/pages/code/code',
						middleClass: ''
					},
					{
						iconPath:  '../../static/会员卡首页2/组合 338.png',
						selectedIconPath:  '../../static/会员卡首页2/组合 332.png',
						text: '套餐卡',
						pagePath: '/pages/packageCard/packageCard'
					},
					{
						iconPath: '../../static/会员卡首页2/组合 126.png',
						selectedIconPath: '../../static/会员卡首页2/组合 330.png',
						text: '分销',
						pagePath: '/pages/distribution/distribution',
						middleClass: ''
					}
				],
				tabListThree: [{
						iconPath: '../../static/会员卡首页3/组合 332.png',
						selectedIconPath:'../../static/会员卡首页3/组合 338.png',
						text: '首页',
						pagePath: '/pages/index/index3',
						middleClass: ''
					},
					{
						iconPath: '../../static/会员卡首页3/组合 334.png',
						selectedIconPath:'../../static/会员卡首页3/组合 337.png',
						text: '商城',
						pagePath: '/pages/shop/shop',
						middleClass: ''
					},
					{
						iconPath: '../../static/会员卡首页3/组合 3088.png',
						selectedIconPath:  '../../static/会员卡首页3/组合 3088.png',
						text: '会员码',
						pagePath: '/pages/code/code',
						middleClass: ''
					},
					{
						iconPath: '../../static/会员卡首页3/组合 335.png',
						selectedIconPath: '../../static/会员卡首页3/组合 336.png',
						text: '套餐卡',
						pagePath: '/pages/packageCard/packageCard'
					},
					{
						iconPath: '../../static/会员卡首页3/组合 332.png',
						selectedIconPath: '../../static/会员卡首页3/组合 126.png',	
						text: '分销',
						pagePath: '/pages/distribution/distribution',
						middleClass: ''
					}
				],
				tabListFour: [{
						iconPath:'../../static/会员卡首页4/组合 3131.png',
						selectedIconPath: '../../static/会员卡首页4/组合 3151.png',
						text: '首页',
						pagePath: '/pages/index/index4',
						middleClass: ''
					},
					{
						iconPath: '../../static/会员卡首页4/组合 312.png',
						selectedIconPath: '../../static/会员卡首页4/组合 3168.png',
						text: '商城',
						pagePath: '/pages/shop/shop',
						middleClass: ''
					},
					{
						iconPath: '../../static/会员卡首页4/组合 310.png',
						selectedIconPath: '../../static/会员卡首页4/组合 310.png',
						text: '会员码',
						pagePath: '/pages/code/code',
						middleClass: ''
					},
					{
						iconPath:  '../../static/会员卡首页4/组合 311.png',
						selectedIconPath: '../../static/会员卡首页4/组合 3176.png',
						text: '套餐卡',
						pagePath: '/pages/packageCard/packageCard'
					},
					{
						iconPath: '../../static/会员卡首页4/组合 3101.png',
						selectedIconPath: '../../static/会员卡首页4/组合 358.png',
						text: '分销',
						pagePath: '/pages/distribution/distribution',
						middleClass: ''
					}
				],
				showTabBar: false,
				showMiddleButton: true,
			};
		},
		computed: {
			getHeight() {
				return Number(this.height);
			},
		},
		mounted() {
			this.getSystemInfo()
			this.setTabBar()
		},
		methods: {
			//判断中间按钮是否突出显示
			setTabBar(){
				let tabLength;
				let tabLists = [this.tabList, this.tabListTwo, this.tabListThree, this.tabListFour];
				
				if (this.tabListNum >= 1 && this.tabListNum <= 4) {
				    tabLength = tabLists[this.tabListNum - 1].length;
				 
				    
				    if (this.showMiddleButtonBar) {
				        this.showMiddleButton = true;
				        let middleIndex = Math.floor(tabLength / 2);
				        tabLists[this.tabListNum - 1][middleIndex].middleClass = 'mid-button';
				    }else{
						 this.showMiddleButton = false;
					}
					console.log(this.showMiddleButton)
				}
				// if (tabLength % 2) {
				// 	this.showMiddleButton = true
				// 	let middleIndex = Math.floor(tabLength / 2)
				// 	this.tabList[middleIndex].middleClass = 'mid-button'
				// }
			},
			//点击按钮
			handlePush(item, index) {
				// 不切换页面
				if(index==2){
					this.$emit('changeItem','selsectCode')
					return
				}
				
				if (this.tabIndex !== index) {
					// uni.switchTab({
					// 	url: `${item.pagePath}?tabIndex=${index}`,
					// })
					this.$emit('changeItem',index)
				}
			},
			//兼容iPhoneX以上底部黑线条的显示
			getSystemInfo() {
				uni.getSystemInfo({
					success: (res) => {
						// X及以上的异形屏top为44，非异形屏为20
						if (res.safeArea.top > 20) {
							this.showTabBar = true
						}
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.flex {
		display: flex;
		flex-flow: row wrap;
	}

	.flex-center {
		align-items: center;
		justify-content: center;
	}

	.flex-column {
		flex-direction: column;
	}

	.flex-middle {
		align-items: center;
	}
	.font-20 {
		font-size: 20rpx;
	}
	.tab-block {
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		background-size: contain;
		width: 100vw;
		.tab-list{
			height: 100rpx; padding: 0;
		}
		.tab-list-default{
			background-color: #FFFFFF;
			border-top: 1px #dddddd solid;
		}
		.tab-list-middle {
			position: relative;
			background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
			background-size: cover;
		}
		.list-item {
			flex: 1;
			.item-img-box {
				width: 44rpx;
				height: 42rpx;
				margin-bottom: 9rpx;
				position: relative;
			}
            .color-blackWeight{
				font-weight: 700;
			}
			.color-blue{
				color:rgb(0, 124, 255);
			}
			.color-orange{
				color:#FFCF66;
			}
			.color-pink{
				color:#F484AD;
			}
			.color-pink{
				color:#F484AD;
			}
			.color-green{
				color:#4CC937;
			}
			.item-img {
				width: 44rpx;
				height: 42rpx;
			}
		}

		.mid-button {
			position: relative;

			.item-img-box {
				width: 106rpx;
				height: 106rpx;
				margin-bottom: 9rpx;
				position: absolute;
				z-index: 1002;
				top: -104rpx;
			}

			.item-img {
				width: 106rpx;
				height: 106rpx;
			}

			.item-text {
				font-size: 20rpx;
				position: absolute;
				z-index: 1002;
				bottom: -40rpx;
			}
		}

		.tab-bar {
			height: 30rpx;
			background-color: #FFFFFF;
		}
	}
</style>
